<template>
  <h2>这是一个测试侦听属性的案例</h2>
 <h3>用户姓名:{{user.name}}</h3>
 <h3>用户年龄:{{user.age}}</h3>
 <button @click="user.name+='@'">修改姓名</button>
 <button @click="qian">修改年龄</button>
</template>
<script>
import {reactive, watch} from 'vue'
export default {
  name:'HelloWorld_h',
  setup(){
    let user = reactive({
      name:'jack',
      age:20,
      address:'深圳市',
      car:{
        brand:'奥拓',
        price:20000
      }
    })
    function qian() {
      user.car.price+=333
     }
    // 情况一：监视对象的时候 新值旧值是一样的 无法监测旧值 默认开启深度监视 deep无效 
    //监视属性有三个值，1.要监视的对象，二回调，回调里有新值和旧值，三配置项
    // watch(user,(newValue,oldValue)=>{
    //   console.log('监视user对象了...',newValue,oldValue)
    // },{deep:false})
    // 监视某个具体的对象可以看到新旧值的变化,必须写箭头函数的形式
    //  watch(()=>user.car.price,(newValue,oldValue)=>{
    //   console.log('user中的属性值变化了...',newValue,oldValue)
    //  })
    //监视某个对象，但是要开启深度监视不然监视不到，就算监视到了新值和旧值函数一样
       watch(()=>user.car,(newValue,oldValue)=>{
      console.log('user.car被监听了...',newValue,oldValue)
    },{deep:true})
    return {
      user,
      qian
    }
  }
}
</script>